<template>
  <div class="back">
    <div class="container">
      <p style="font-size: 20px;color: white">我的得分（平均分）：{{grade}}</p>
      <p style="font-size: 20px;color: white">我收到的评价：</p>
      <table cellpadding="0" cellspacing="0" align="center">
        <thead>
        <tr>
          <th >序号</th>
          <th >评价日期</th>
          <th width="88%">评价内容</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in assessRecord" v-bind:key="index">
          <td>{{index+1}}</td>
          <td>{{item.date}}</td>
          <td>{{item.content}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      object : JSON.parse(this.$route.query.obj),
      grade:'99',
      assessRecord:[
          {date:'2021-2-21',content:'很细心！'},
          {date:'2021-2-21',content:'太温暖啦！'},
          {date:'2021-2-21',content:'非常优秀！建议加薪！'},
          {date:'2021-2-21',content:'超级温柔，超级细心，还特别善良！继续努力呀！'}]
    }
  },
  methods:{
  },
  mounted:function (){
    //获取当前护工的平均分和评价（评价日期和评价内容）
  }
}
</script>

<style scoped>
.container{
  width: 80%;
  height: auto;
  background: white;
  margin-left: 10%;
  margin-top: 30px;
  /*opacity: 0.3;*/
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height:80%;
}

.back{
  background:url("http://cdn-dlut.supwisdom.com/student/static/common-home/img/theme1.jpg");
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: fixed;
  top: 0px; /*这里是设置与顶部的距离*/
  left: 0px; /*这里是设置与左边的距离*/
  bottom: 0px;
  right: 0px;

}

table thead th {
  background: #f5f5f5;
  padding: 10px;
  text-align: center;

}

table tbody td {
  background: lightgray;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}

table tbody td span {
  margin: 0 10px;
  cursor: pointer;
}

</style>